<script setup>
import { ref, watch, reactive, toRefs } from "vue";
import { createWindow, ipcRendererSend } from "../../utils/ipcRenderer";
import { formatTime } from "../../utils/tool";
import { Local } from "@/utils/storage";
import { storeToRefs } from "pinia";
import { userStore } from "@/store/user";
import { musicStore } from "@/store/music";
import { RmMessage } from "../../utils/RmMessage";
import emitter from "../../utils/eventBus";
import { getMusicLike, getMusicAdd } from "../../apis/music";
const { songListIds, musicDetail, songId, likeIdList } = storeToRefs(
  musicStore()
);
const { userId, userPrivate } = storeToRefs(userStore());

const props = defineProps(["songs", "listInfo"]);

const state = reactive(props);
const { songs } = toRefs(state);

const isLike = ref(false);

emitter.on("playFirstMusic", () => {
  songListIds.value = props.songs;
  Local.set("songList", props.songs);
  Local.set("musicInfo", props.songs[0]);
  songId.value = props.songs[0].id;
  ipcRendererSend("windows-param", {
    emit: "playMusic",
    data: props.songs[0].id,
    targetName: "home",
  });
});

if (Local.get("musicInfo")) {
  songId.value = Local.get("musicInfo").id;
}
emitter.on("updateSongId", (data) => {
  songId.value = data;
});

const handlePlay = (item) => {
  musicDetail.value = item;
  songListIds.value = props.songs;
  Local.set("songList", props.songs);
  Local.set("musicInfo", item);
  songId.value = item.id;
  ipcRendererSend("windows-param", {
    emit: "playMusic",
    data: item.id,
    targetName: "home",
  });
};

const handleVideo = (item) => {
  createWindow({
    windowName: "videoDetail",
    path: "videoDetail",
    width: 1360,
    height: 820,
    param: { id: item.mv },
  });
  ipcRendererSend("windows-param", {
    emit: "playVideo",
    targetName: "home",
  });
};

const handleAlbum = (id) => {
  createWindow({
    windowName: "albumDetail",
    path: "albumDetail",
    width: 1200,
    height: 820,
    param: { id: id },
  });
};

const handleSinger = (id) => {
  createWindow({
    windowName: "singerDetail",
    path: "singerDetail",
    width: 1200,
    height: 820,
    param: { id: id },
  });
};

const handleLike = async (type, id) => {
  let res = await getMusicLike(id, type);
  if (!res.code) {
    return RmMessage.success("请勿重复添加哦!");
  }
  if (res.code == 200 && type == true) {
    RmMessage.success("已添加到我喜欢的音乐");
  } else {
    RmMessage("取消喜欢成功");
  }
};

const handleAdd = (pid, trackId) => {
  getMusicAdd("add", pid, trackId).then((res) => {
    if (res.body.code == 502) {
      return RmMessage.warning(res.body.message);
    }
    if (res.status == 200) {
      RmMessage.success("成功添加一首歌曲");
      setTimeout(() => {
        ipcRendererSend("windows-param", {
          emit: "updatePrivateList",
          data: pid,
          targetName: "home",
        });
      }, 5000);
    }
  });
};

const handleDel = (trackId, index) => {
  ElMessageBox.confirm("是否移除此歌曲?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      getMusicAdd("del", props.listInfo.id, trackId).then((res) => {
        if (res.status == 200) {
          props.songs.splice(index, 1);
          return RmMessage.success("成功移除一首歌曲");
        } else {
          return RmMessage.error(res.message);
        }
      });
    })
    .catch(() => {});
};
</script>

<template>
  <div class="musicList">
    <el-scrollbar height="100%">
      <div v-if="songs.length > 0" class="list_wrap">
        <div class="item_wrap">
          <div
            v-for="(item, index) in songs"
            :key="item.id"
            :class="{ active_position: item.id === songId }"
            class="item"
            @dblclick="handlePlay(item)"
          >
            <div class="cover">
              <!-- <div>{{ index + 1 }}</div> -->
              <!-- <img :src="item.al.picUrl" alt="" /> -->
              <el-image
                lazy
                :src="item.al.picUrl + `${'?param=50y50'}}`"
                fit="cover"
              >
                <template #placeholder>
                  <div style="font-size: 10px" class="image-slot">
                    Loading<span class="dot">...</span>
                  </div>
                </template>
              </el-image>
            </div>
            <div class="info">
              <div class="name">
                {{ item.name }}
              </div>
              <div class="creator_name">
                <span @click="handleSinger(item.ar[0].id)">{{
                  item.ar[0].name
                }}</span>
              </div>
            </div>
            <div class="album">
              <span @click="handleAlbum(item.al.id)">{{ item.al.name }}</span>
            </div>
            <div class="timer">{{ formatTime(item.dt) }}</div>
            <div v-if="userId" class="btn">
              <div
                @click="handleLike(true, item.id)"
                v-if="likeIdList.indexOf(item.id) == -1"
                class="iconfont icon-aixin1 like"
              ></div>
              <div
                @click="handleLike(false, item.id)"
                v-else
                class="iconfont icon-aixin"
              ></div>
              <el-popover
                ref="popoverRef"
                placement="bottom"
                :show-arrow="false"
                :width="200"
                trigger="click"
              >
                <template #reference>
                  <div class="iconfont icon-tianjia1"></div>
                </template>
                <ul class="list-wrap">
                  <li
                    v-for="v in userPrivate"
                    :key="v.id"
                    @click="handleAdd(v.id, item.id)"
                  >
                    {{ v.name }}
                  </li>
                </ul>
              </el-popover>
              <div
                v-if="props.listInfo.id"
                @click="handleDel(item.id, index)"
                class="iconfont icon-yingyong-"
              ></div>
            </div>
            <div class="mv">
              <el-button
                size="small"
                @click="handleVideo(item)"
                v-if="item.mv != 0"
                type="primary"
                >mv</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <el-skeleton :rows="12" v-else> </el-skeleton>
      <upbar></upbar>
    </el-scrollbar>
  </div>
</template>

<style scoped lang="scss">
.musicList {
  height: 100%;
  // height: calc(100vh - 330px);
  .list_wrap {
    width: 95%;
    .item_wrap {
      .item {
        background-color: #fff;
        height: 40px;
        padding: 10px 0;
        display: flex;
        align-items: center;
        border-radius: 10px;
        .cover {
          // margin: 0 10px;
          width: 45px;
          height: 45px;
          // border-radius: 5px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 18px;
          color: #263869;
          font-weight: 600;
          .el-image {
            width: 100%;
            height: 100%;
            border-radius: 5px;
            box-shadow: 2px 2px 12px 4px rgba(0, 0, 0, 0.1);
          }
        }
        .info {
          cursor: pointer;
          margin-left: 10px;
          width: 30%;
          .name {
            width: 100%;
            font-weight: 600;
            font-size: 17px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .creator_name {
            color: #525252;
            font-size: 13px;
            span:hover {
              text-decoration: underline;
            }
          }
        }
        .album {
          cursor: pointer;
          color: #525252;
          width: 30%;
          font-size: 15px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          span:hover {
            text-decoration: underline;
          }
        }
        .timer {
          margin-left: 5px;
          color: #525252;
          font-size: 15px;
        }
        .btn {
          width: 20%;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          .icon-tianjia1,
          .icon-yingyong- {
            color: #7967e4;
          }
          div {
            display: none;
            margin-left: 20px;
          }
          div:hover {
            transform: scale(1.1);
          }
          .like {
            font-size: 15px;
          }
        }
        .mv {
          width: 8%;
          text-align: right;
          margin-right: 10px;
          &:hover .el-button {
            transform: scale(1.1);
          }
          .el-button {
            background-color: #fff;
            color: rgb(16, 24, 134);
            font-weight: 600;
            border: none;
            border-radius: 5px;
          }
        }
      }
      .active_position {
        color: #335eea;
        background: #eaeffd;
        .info {
          .name,
          .creator_name {
            color: #335eea;
          }
        }
        .album,
        .timer {
          color: #335eea;
        }
      }
      .item:hover {
        background-color: #f6f6f8;
      }
      .item:hover .btn div {
        display: block;
      }
    }
  }
}
:deep(.el-popper) {
  padding: 0;
}
.list-wrap {
  li {
    font-size: 12px;
    letter-spacing: 1px;
    cursor: pointer;
    padding: 6px 10px;
    transition: all 0.2s;
    border-radius: 4px;
    overflow: hidden; //溢出隐藏
    white-space: nowrap; //禁止换行
    text-overflow: ellipsis; //...

    &:hover {
      background-color: rgba(238, 236, 236, 0.541);
    }
  }
}
</style>
